@charset "UTF-8";
@import "common.css";

/* 招财宝账户首页 */
%clear{*zoom:1;}%clear:before,%clear:after{display:table;content:"";}
%clear:after{clear:both;}

%inline_block{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

%sprite{
  background-image: url(../img/index.png);
  background-repeat: no-repeat;
}

// mod
.mod_tit{
  font: 700 14px/14px \5FAE\8F6F\96C5\9ED1;
  padding-left: 5px;
  border-left: 4px solid #fe6902;
}
// icon
.icon{
  @extend %inline_block;
  @extend %sprite;
  margin-right: 3px;
  margin-bottom: -3px;
}
.icon_tip{
  width: 16px;
  height: 16px;
  background-position: 0 -40px;
}
.icon_list, .icon_clock{
  width: 16px;
  height: 16px;
  background-position: 0 -60px;
  vertical-align: 0\0;
  *vertical-align: -1px;
}
.icon_clock{
  background-position: -20px -60px;
}
.icon_speaker{
  width: 14px;
  height: 14px;
  background-position: -20px -40px;
}

// color
.co_red{
  color: #e83433;
}
.co_orange{
  color: #fe6a00;
}
.co_gray{
  color: #666;
}

// tip
.tip_global{
  height: 28px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 20px;
  background: #fff9db;
  border: 1px solid #ffd7ac;
  color: #333;

  .icon_speaker{
    margin-left: 10px;
    margin-right: 5px;
  }
}

// 全局提示信息
.tip_layer{
  $border_color: #ddd;

  height: 14px;
  line-height: 14px;
  padding: 8px 11px;
  background: #fff;
  border: 1px solid $border_color;
  position: absolute;
  z-index: 20;
  color: #666;
  white-space: nowrap;
  
  span{
    font-weight: 700;
    color: #e83538;
  }

  .link_view{
    color: #228dd5;
    margin-left: 10px;
  }

  i{
    width:16px;
    font:300 16px Simsun;
    position: absolute;
    left: 20px;
  }
  .arr_outer{
    color: $border_color;
    bottom: -9px;
  }
  .arr_inner{
    color: #fff;
    bottom: -8px;
  }
}


.cmf_index{
  width: 760px;
  padding: 20px;
}

.state_bar{
  height: 24px;
  line-height: 24px;
  margin: 10px 0;
  @extend %clear;

  .id_wrap{
    float: left;
    height: 24px;
    color: #666;
    
    .txt{
      float: left;
      height: 24px;
      line-height: 24px;
      margin-right: 10px;
      vertical-align: top;
    }
  }

  .icon_wrap{
    @extend %inline_block;
    height: 18px;
    margin-top: 1px;
    margin-top: -1px\0;
    
    i{
      @extend %inline_block;
      width: 18px;
      height: 18px;
      margin-right: 7px;
    }

    .icon_badge_1{
      background-position: 0 -20px;
    }
    .icon_badge_2{
      background-position: -20px -20px;
    }
    .icon_badge_3{
      background-position: -40px -20px;
    }
    .icon_badge_4{
      background-position: -60px -20px;
    }

    .icon_badge_1_on{
      background-position: 0 0;
    }
    .icon_badge_2_on{
      background-position: -20px 0;
    }
    .icon_badge_3_on{
      background-position: -40px 0;
    }
    .icon_badge_4_on{
      background-position: -60px 0;
    }
  }

  .login_info{
    float: right;
    color: #999;
  }
}

.info_panel{
  $border_color: #cccbc7;

  border-bottom: 1px dotted $border_color;
  background: #fefdfc;
  @extend %clear;
  
  .hd{
    padding: 10px 0;
    border-bottom: 1px solid #dcdcdc;
  }

  .col{
    float: left;
    padding: 15px 25px;
    height: 150px;
  }


  .col_left{
    width: 410px;
    border-right: 1px dotted $border_color;
  }
  
  .col_right{
    width: 248px;
    
    .bd{
      padding-top: 15px;
    }
  }
  
  .num_wrap{
    height: 32px;
    line-height: 32px;
    padding: 25px 0 20px;
    @extend %clear;
    
    .icon_tip{
      margin-left: 5px;
    }
  }
  
  .num{
    float: left;
    color: #676767;

    em{
      font: 700 32px/32px arial;
      color: #ec3635;
    }
  }
  
  .btn_wrap{
    float: right;
  }

  .btn{
    @extend %inline_block;
    width: 56px;
    height: 28px;
    line-height: 28px;
    margin-left: 8px;
    border: 1px solid #ddd;
    color: #333;
    text-align: center;
    background: #fff;
    
    &:hover{
      text-decoration: none;
    }
  }
  
  .btn_active{
    border: 1px solid #e93534;
    background: #e93534;
    color: #fff;
  }

  .income_wrap{
    color: #999;
    span{
      height: 14px;
      line-height: 14px;
    }
    .sum{
      padding-right: 10px;
      border-right: 1px solid #ccc;
    }
    .rate{
      padding-left: 10px;
    }
  }
  
  .property{
    height: 32px;
    line-height: 32px;
    position: relative;

    .property_num{
      color: #999;
    }

    .link_buy{
      color: #2b7fd5;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.account_sum{
  @extend %clear;
  height: 16px;
  line-height: 16px;
  padding: 18px 15px 18px 26px;
  margin-bottom: 15px;
  background: #fcfbfa;
  
  .account_link{
    float: left;
    color: #999;
  }
  .txt{
    float: left;
    margin-top: 2px;
  }
  .link{
    @extend %inline_block;
    height: 16px;
    line-height: 16px;
    color: #666;
    vertical-align: top;
  }
  .link_detail{
    padding-right: 14px;
    border-right: 1px solid #cdccca;
  }
  .link_record{
    padding-left: 14px;
  }
  .account_num{
    float: right;
    color: #999;
  }
}

.floor{
  margin-bottom: 10px;
  
  .hd{
    padding: 10px 0;
    position: relative;
  }
  
  .link_more{
    position: absolute;
    top:7px;
    right:0;
    color: #666;
  }
}

.net_wrap{
  @extend %clear;
  
  .net_item{
    float: left;
    width: 248px;
    height: 160px;
    margin-right: 8px;
    
    &:last-child{
      margin-right: 0;
    }
  }
  
  .tit{
    height: 22px;
    line-height: 22px;
    margin: 20px 10px 12px 16px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
  }
  
  .value_wrap{
    @extend %clear;
    margin: 12px 10px 10px 16px;
    background: #fff;
  }
  
  .net_value{
    height: 64px;
    float: left;
  }
  .net_value_new{
    width: 41%;
  }

  h4{
    height: 12px;
    line-height: 12px;
    padding: 11px 10px 11px 14px;
    color: #fff;
    font-weight: 400;
  }

  .value{
    padding: 0 10px 0 14px;
    color: #fff;
    font: 18px/18px arial;
    height: 18px;
  }

  .desc{
    color: #666;
    text-align: right;
    padding-right: 10px;
  }

  .net_value_sum{
    h4{
      color: #999;
    }
    .value{
      color: #ff6902;
    }
  }

  .net_item_blue{
    background: #bcdbf0;
    .tit{
      text-shadow: 1px 1px 2px #b5d2e8;
    }

    .value_wrap{
      box-shadow: 2px 2px 2px #b5d5ee;
    }
    .net_value_new{
      background: #97c5e7;
    }
    .desc{
      color: #5091be;
    }
  }
  .net_item_green{
    background: #b0e4bd;
    .tit{
      text-shadow: 1px 1px 2px #a7dab3;
    }

    .value_wrap{
      box-shadow: 2px 2px 2px #a9e1b4;
    }
    .net_value_new{
      background: #8dd49c;
    }
    .desc{
      color: #53a666;
    }
  }
  .net_item_red{
    background: #ffd2d2;
    margin-right: 0;
    .tit{
      text-shadow: 1px 1px 2px #f3c8c8;
    }

    .value_wrap{
      box-shadow: 2px 2px 2px #fac7c7;
    }
    .net_value_new{
      background: #fbadad;
    }
    .desc{
      color: #b86f6f;
    }
  }
}

.top_grade_rec{
  height: 150px;
  background: #ffe9d9;

  h2{
    padding: 25px 15px 13px 15px;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    color: #9f846f;
  }
  
  .detail_wrap{
    @extend %clear;
    padding-left: 15px;
    padding-right: 20px;
  }
  
  .invest_info{
    float: left;
    background: #fff;
    box-shadow: 2px 2px 5px #fce3d1;
  }
  
  .info{
    float: left;
    width: 130px;
    height: 65px;
  }

  h4{
    height: 12px;
    line-height: 12px;
    padding: 11px 10px 11px 14px;
    color: #fff;
    font-weight: 400;
  }

  .value{
    padding: 0 10px 0 14px;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    height: 18px;
  }

  .info_limit{
    background: #ffbe7e;
  }
  .info_time{
    background: #fff9f5;
    h4{
      color: #999;
    }
    .value{
      color: #999
    }
  }
  .info_rate{
    h4{
      color: #999;
    }
    .value{
      color: #ff6801;
    }
  }

  .order_wrap{
    float: right;
  }

  .start_time{
    color: #666;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .btn_order{
    display: block;
    width: 208px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: #e93536;
    &:hover{
      text-decoration: none;
    }
  }
}

.image_wrap{
  @extend %clear;
  a{
    display: block;
    img{
      display: block;
      width: 100%;
    }
  }
}

.image_wrap_3{
  a{
    float: left;
    width: 248px;
    height: 150px;
    margin-right: 8px;
    
    &:last-child{
      margin-right: 0;
    }
    &.last{
      margin-right: 0;
    }

    img{
      width: 248px;
      height: 150px;
    }
  }
}
